
//获取页面传值
function getQueryString(item) {
	var svalue = location.search.match(
		new RegExp("[?&]" + item + "=([^&]*)(&?)", "i")
	);
	return svalue ? svalue[1] : svalue;
}
var lv = getQueryString("lv");
//设定步数,必须大于lv*4
var count = lv * 4 * 2;
//记录已消的数量
var hide = 0;
var row = lv;
//渲染页面
function render(row, col) {
	// 渲染行
	var rowhtml = ``;
	var colhtml = ``;
	for (var r = 0; r < row; r++) {
		rowhtml += `<div class="row"></div>`
	}
	$(".game_box").html(rowhtml);
	//渲染列
	for (var r = 0; r < row; r++) {
		for (var i = 0; i < col; i++) {
			colhtml += `<div class="outbd">
				<div class="item">
			<div class="front"></div>
			<div class="back"><img class='back_img' src="" alt="" ondragstart="return false"></div>
			</div></div>`
		}
		$(`.row:eq(${r})`).html(colhtml);
		// 渲染一行后清空变量
		colhtml = '';
	}
}
// 生成随机数组
function random(lv) {
	//console.log(len);
	var len = lv * 4;
	var arr = [];
	for (var i = 0; i < len; i++) {
		arr[i] = i + 1;
		if (arr[i] > (len / 2)) {
			arr[i] = arr[i] - len / 2
		}
		else if (arr[i] > 10 && arr[i] <= 20) {
			arr[i] = arr[i] - 10;
		}
		else if (arr[i] > 20) {
			arr[i] = arr[i] - 20;
		}
	}
	return arr;
}
//放入图片
function draw(arr) {
	for (var i = 0; i < arr.length; i++) {
		$(`.item:eq(${i})`).attr('compare', `${arr[i]}`);
		$(`.back_img:eq(${i})`).attr('src', `./images/${arr[i]}.jpg`);
	}
}
//打乱数组函数
function randomSort() {
	return Math.random() > .5 ? -1 : 1;
	//随机数大于0.5返回-1，反之返回1
}
// 初始化
function init() {
	//行为等级,列为4
	render(row, 4);
	var arr = random(lv);
	arr.sort(randomSort)
	draw(arr);
	console.log(arr);
	$('.step').html(`步数: ${count}`);
	var get_record = localStorage.getItem(`record${lv}`) || count;
	$('.score').html(`记录: 剩${get_record}步`);

	// 开始先亮牌再合上
	$('.item').addClass('start_act')
	setTimeout(() => {
		$('.item').removeClass('start_act')
	}, 1000);

}
init();
var flag = true;
//点击翻转
$('.game_box').on('click', '.item', function (e) {
	if (count > 0) {
		if (flag) {
			count--;
			//每次点击记录步数
			$('.step').html(`步数: ${count}`)
			$(this).toggleClass('act');
			if ($('.act').length == 2) {
				var compare1 = $('.act img').eq(0).attr('src')
				var compare2 = $('.act img').eq(1).attr('src')
				flag = !flag;
				if (compare1 == compare2) {
					setTimeout(() => {
						//先消失在去除翻转样式,因为前面需要用翻转样式比较
						$('.act').addClass('disappear');
						$('.act').toggleClass('act');
						flag = !flag;
					}, 500)
					//消失牌数加2
					hide += 2;
					//通关
					if (hide == $('.item').length) {
						var get_record = localStorage.getItem(`${lv}`);
						if (get_record = null) {
							localStorage.setItem(`record${lv}`, JSON.stringify(count));
							//如果当前用的步数更少,则是新纪录
						} else if (count > get_record) {
							localStorage.setItem(`record${lv}`, JSON.stringify(count));
							$('.score').html(`记录:  ${count}`);
						}
						var endhtml = `<h1>PERFECT</h1>
					<h3>score: ${count} </h3>
					<div class="btn_box">
					<div class="btn next">next</div>
					<div class="btn home">home</div>
					</div>`
						$('.end').html(endhtml)
						$('.mask').fadeIn();
					}
				} else {
					setTimeout(() => {
						$('.act').toggleClass('act');
						flag = !flag;
					}, 400)
					//重置比较项
				}
				compare1 = compare2 = null;
			}
		}
		} else {
			var endhtml = `<h1>GAME OVER</h1>
			<div class="btn_box">
				<div class="btn again">again</div>
				<div class="btn home">home</div>
			</div>`
			$('.end').html(endhtml)
			$('.mask').fadeIn();
		}
	
})
//点击again
$('.again').on('click', function () {
	compare1 = compare2 = null;
	count = lv * 4 * 2;
	hide = 0;
	$('.game_box').html(``);
	init(lv, 4);
	$('.mask').fadeOut();

})
$('.mask').on('click', '.again', function () {
	compare1 = compare2 = null;
	count = lv * 4 * 2;
	hide = 0;
	$('.game_box').html(``);
	init(lv, 4);
	$('.mask').fadeOut();
})
//点击home
$('.home').on('click', function () {
	window.location.href = "./index.html"
})
$('.mask').on('click', '.home', function () {
	window.location.href = "./index.html"
})
//点击next
$('.next').on('click', function () {
	lv++
	if (lv > 4) {
		lv = 4
	}
	location.href = `./game.html?lv=${lv}`;
})
$('.mask').on('click', '.next', function () {
	lv++
	if (lv > 4) {
		lv = 4
	}
	location.href = `./game.html?lv=${lv}`;
})